<template>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
        <el-descriptions title="班组商入库" :column="4" border >
            <el-descriptions-item label="项目名称" :span="2"><el-input v-model="ruleForm.name"  /></el-descriptions-item>
            <el-descriptions-item label="施工内容" :span="2"><el-input v-model="ruleForm.content"  /></el-descriptions-item>
            <el-descriptions-item label="单位　　"><el-input v-model="ruleForm.unit"  /></el-descriptions-item>
            <el-descriptions-item label="工程量　"><el-input v-model="ruleForm.work_quantity"  /></el-descriptions-item>
            <el-descriptions-item label="单价　　"><el-input v-model="ruleForm.unit_price"  /></el-descriptions-item>
            <el-descriptions-item label="合价　　"><el-input v-model="ruleForm.price"  /></el-descriptions-item>
            <el-descriptions-item label="备注　　" :span="4"><el-input v-model="ruleForm.remarks" :rows="4" type="textarea" :autosize="{ minRows: 4 }" /></el-descriptions-item>
        </el-descriptions>
    </el-form>
        
    <div class="text-center mt30">
        <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading"> 保存 </el-button>
        <el-button type="info" @click="router.go(-1)"> 返回 </el-button>
        <component :is="applyButton" model = "Team" source = "Team" type = "apply" :id = id :price="0" />
        <component :is="applyRevoke" model = "Team" source = "Team" :id = id />
    </div>
</template>
  
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import http from '../../../util/request';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import router from '../../../router';
import applyButton from "@/components/applyButton.vue";
import applyRevoke from "@/components/applyRevoke.vue";

const loading = ref<boolean>(false)
const ruleFormRef = ref<FormInstance>()
const id:any = ref(useRouter().currentRoute.value.params.id)

interface RuleForm {
    name:string
    content:string
    work_quantity:number
    unit:string
    unit_price:number
    price:number
    remarks:string
}
const ruleForm = ref<any>({name:'',content:'',unit:'',work_quantity:0,unit_price:0,price:0,remarks:''})

const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: '请输入项目名称', trigger: 'blur' },
    ],
    content: [
        { required: true, message: '请输入施工内容', trigger: 'blur' },
    ],
    unit: [
        { required: true, message: '请输入单位', trigger: 'blur' },
    ],
    work_quantity: [
        { required: true, message: '请输入工程量', trigger: 'blur' },
    ],
    unit_price: [
        { required: true, message: '请输入单价', trigger: 'blur' },
    ],
    price: [
        { required: true, message: '请输入合价', trigger: 'blur' },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    console.log(ruleForm.value)
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loading.value = true
            let request:any = null
            if(ruleForm.value.id){
                request = http.patch('/team',ruleForm.value)
            }else{
                request = http.put('/team',ruleForm.value)
            }
            request.then((response:any)=>{
                loading.value = false
                if(response.data.code != 200){
                    ElMessage.error(response.data.msg);
                    return
                }
                
                if(!ruleForm.value.id){
                    id.value = response.data.data.id
                }
                getData()
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const getData = () => {
    if(id.value == 0){
        return;
    }
    http.get('/team/'+id.value).then((response:any)=>{
        if(response.data.data){
            ruleForm.value = response.data.data
            ruleForm.value.price = parseInt(ruleForm.value.price)
        }
    })
}

onMounted(()=>{
    getData()
})

</script>
<style scoped>
.contract{height: calc(100vh - 25vh);overflow-y: scroll;}
.b_ .el-input{width: 340px;}
</style>
